<template>
  <div>
    <div
      style="
        background-color: rgb(249, 249, 249);
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <div style="width: 70%; display: flex">
        <div>
          <img
            src="../../assets/img/client.png"
            alt=""
            style="width: 40px; height: 40px; margin-top: 5px"
          />
        </div>
        <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
          客户联系
        </div>
      </div>
      <div style="width: 30%">
        <div>
          <img
            src="../../assets/img/sq.png"
            alt=""
            style="background-color: rgb(200, 200, 200); float: right"
          />
        </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="联系情况" name="first">
            <div
              style="
                display: flex;
                margin-top: 10px;
                flex-direction: row-reverse;
              "
            >
              <div>
                <el-button type="primary" size="mini">EXCEL导入</el-button>
              </div>
              <div style="margin-right: 10px">
                <el-input
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="input"
                  size="mini"
                >
                </el-input>
              </div>
              <div>
                <el-button size="mini">高级搜索</el-button>
              </div>
            </div>
            <div style="margin-top: 10px">
              <el-table :data="informationData" style="width: 100%">
                <el-table-column prop="title" label="标题"> </el-table-column>
                <el-table-column prop="content" label="内容" width="140">
                </el-table-column>
                <el-table-column
                  prop="contactTime"
                  label="联系时间"
                  width="140"
                >
                </el-table-column>
                <el-table-column prop="customerName" label="客户名称">
                </el-table-column>
                <el-table-column prop="executor" label="执行人" width="130">
                </el-table-column>
                <el-table-column
                  prop="contactInformation"
                  label="联系方式"
                  width="100"
                >
                </el-table-column>
                <el-table-column prop="relatedBusiness" label="相关商机">
                </el-table-column>
                <el-table-column
                  prop="relevantContact"
                  label="相关联系人"
                  width="100"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getContactInformation } from "../../api/sales";
export default {
  mounted() {
    this.getContactInformation();
  },
  data() {
    return {
      activeName: "first",
      informationData: [],
    };
  },
  methods: {
    getContactInformation() {
      getContactInformation().then((res) => {
        console.log(res);
        this.informationData = res.result;
      });
    },
  },
};
</script>

<style>
</style>